<template>
    <div class="min-video">
        <div
            class="image-item"
            v-for="(item, index) in obj.videoList"
            :key="index"
            @click="switchClick(index)"
            :class="{ selected: obj.videoSelected === index }"
        >
            <el-popover
                placement="top"
                title="确定移除该视频吗？"
                :width="200"
                :show-after="400"
                trigger="click"
                content=""
            >
                <template #reference>
                    <i class="el-icon-close"></i>
                </template>
                <el-button
                    type="primary"
                    size="small"
                    @click="$emit('remove', index)"
                    >确定</el-button
                >
            </el-popover>

            <el-image
                v-show="item.coverUrl"
                :src="item.coverUrl"
                fit="fill"
                style="height: 100%; min-width: 120px; border-radius: 2px"
            />
        </div>
    </div>
</template>
<script>
// import { mapState } from "vuex";
export default {
    props: ["obj"],
    // computed: {
    //     ...mapState({
    //         videoList: (state) => state.app.videoList,
    //     }),
    // },
    methods: {
        switchClick(url) {
            this.obj.videoSelected = url;
            this.$emit("switch", url);
        },
    },
};
</script>
<style lang="less" scoped>
.min-video {
    position: relative;
    height: 100%;
    background-color: #f2f3f5;
    border-radius: 4px;
    padding: 10px 4px;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
}

.el-icon-close {
    position: absolute;
    bottom: 2px;
    right: 2px;
    border-radius: 2px;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.49);
    color: #fff;
    cursor: pointer;
}

.image-item {
    height: 100%;
    min-width: 124px;
    box-sizing: border-box;
    margin: 0 5px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    padding: 2px;
}

.selected {
    background-color: #67c23a;
}
</style>
